<template>
  <div>
    <el-form :model="questions">
      <h2>{{ audio.name }}</h2>
      <el-form-item
        v-for="(item, index) in questions.list"
        :key="index"
        :label="`题目 ${index + 1}`"
      >
        <el-input
          placeholder="请输入问题1"
          v-model="item.question1"
          :disabled="disabled"
        ></el-input>
        <el-input
          :disabled="disabled"
          placeholder="请输入问题2"
          v-model="item.question2"
        ></el-input>
        <el-input
          :disabled="disabled"
          placeholder="请输入问题3"
          v-model="item.question3"
        ></el-input>
        <el-input
          :disabled="disabled"
          placeholder="请输入问题4"
          v-model="item.question4"
        ></el-input>
        <span>答案</span>
        <el-radio-group v-model="item.value" style="margin-left: 20px">
          <el-radio :disabled="disabled" label="A">A</el-radio>
          <el-radio :disabled="disabled" label="B">B</el-radio>
          <el-radio :disabled="disabled" label="C">C</el-radio>
          <el-radio :disabled="disabled" label="D">D</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button @click="submitForm" type="primary">提 交</el-button>
    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import audioApi from "@/api/audio/index.js";
import Vue from "vue";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: ["audio"],
  data() {
    //这里存放数据
    return {
      questions: { list: [] },
      disabled: false,
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    //这里进行表单验证
    submitForm() {
      // let answer = JSON.stringify(this.questions.list);
      // this.audio.answers = answer;
      // audioApi.update(this.audio).then((res) => {
      //   this.$message({
      //     message: `${res.message}`,
      //     type: "success",
      //   });
      //   this.$emit("custom-event", { type: "audio_updated", status: true });
      //   this.disabled = true;
      // });
      let validateFlag = true;
      let answers = [];
      let questions = [];
      for (let i = 0; i < this.questions.list.length; i++) {
        const q = this.questions.list[i];
        if (
          !q.question1 ||
          !q.question2 ||
          !q.question3 ||
          !q.question4 ||
          !q.value
        ) {
          this.$message({
            message: "所有选项不能为空！",
            type: "error",
          });
          validateFlag = false;
          break; // 中断循环
        } else {
          answers.push(q.value);
          questions.push({
            question1: q.question1,
            question2: q.question2,
            question3: q.question3,
            question4: q.question4,
          });
        }
      }
      //当程序执行到这里表示验证通过
      if (validateFlag) {
        this.audio.answers = JSON.stringify(answers);
        this.audio.questions = JSON.stringify(questions);
        audioApi.update(this.audio).then((res) => {
          this.$message({
            message: `${res.message}`,
            type: "success",
          });
          this.$emit("custom-event", { type: "audio_updated", status: true });
          this.disabled = true;
        });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    if (!this.audio.answers) {
      for (let index = 0; index < 25; index++) {
        const answer = { value: "" };
        this.questions.list.push(Vue.observable(answer));
      }
    } else {
      const obj = JSON.parse(this.audio.answers);
      for (let index = 0; index < obj.length; index++) {
        const element = obj[index];
        const answer = { value: element };
        this.questions.list.push(Vue.observable(answer));
      }
    }
    if (!this.audio.questions) {
      this.questions.list.forEach((answer) => {
        this.$set(answer, "question1", "");
        this.$set(answer, "question2", "");
        this.$set(answer, "question3", "");
        this.$set(answer, "question4", "");
      });
    } else {
      let questions = JSON.parse(this.audio.questions);
      for (let i = 0; i < 25; i++) {
        const ele = questions[i];
        if (ele) {
          let ans = this.questions.list[i];
          this.$set(ans, "question1", ele.question1);
          this.$set(ans, "question2", ele.question2);
          this.$set(ans, "question3", ele.question3);
          this.$set(ans, "question4", ele.question4);
        }
      }
    }
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped></style>
